<template>
    <div class="box">
        <div class="title">{{ title }}</div>
        <div class="disc" v-if="disc !== 'undefined'">
            <div class="item">
                <span style="margin-right: 0.8em;">{{ text }}检测:</span>共
                <bNumber v-for="item, index in disc" :number="item" :key="index" time="1.8s"></bNumber>人
                <bNumber v-for="item, index in disc" :number="item" :key="index" time="1.8s"></bNumber>次
            </div>
            <div class="item">
                <span style="margin-right: 0.8em;">今日{{ text }}:</span>共
                <bNumber v-for="item, index in disc" :number="item" :key="index" time="1.8s"></bNumber>人
                <bNumber v-for="item, index in disc" :number="item" :key="index" time="1.8s"></bNumber>次
            </div>
        </div>
        <div v-else class="disc"></div>
    </div>
</template>

<script setup lang="ts">
import bNumber from "@/components/widget/b_number.vue";

interface prop {
    title: string
    disc?: string
    text: string
}
const props = defineProps<prop>()
</script>

<style scoped>
.box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    background: #dfdfdf20;
}

.title {
    font-size: 1.2em;
}

.disc {
    font-size: 1em;
    color: #f9e433;
}

.disc .item {
    display: flex;
    align-items: center;
}
</style>